<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style type="text/css">
			html,
			body {
				margin: 0;
				height: 100%;
			}

			canvas {
				display: block;
			}
		</style>
	</head>

	<body onload="draw();">

	</body>

	<script src="./js/three.js" type="text/javascript" charset="utf-8"></script>

	<script src="./js/OrbitControls.js"></script>

	<script src="./js/stats.min.js"></script>

	<script>
		var renderer;

		function initRender() {
			renderer = new THREE.WebGLRenderer({
				antialias: true
			});
			renderer.setSize(window.innerWidth, window.innerHeight);
			//告诉渲染器需要阴影效果

			renderer.shadowMap.enabled = true;
			renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是，没有设置的这个清晰 THREE.PCFShadowMap
			document.body.appendChild(renderer.domElement);

		}

		var camera;

		function initCamera() {
			camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
			camera.position.set(0, 40, 100);
			camera.lookAt(new THREE.Vector3(0, 0, 0));
		}

		var scene;

		function initScene() {
			scene = new THREE.Scene();
			//给场景设置雾化效果 ，参数(雾的颜色，雾化开始距离相机的 距离，雾化结束距离相机的距离)
			scene.fog = new THREE.Fog(0xff0000, 180, 500);
		}

		var ambientLight, directionalLight;

		function initLight() {
			//环境光
			// 			ambientLight = new THREE.AmbientLight("#111111");
			// 			scene.add(ambientLight);
			//点光源
			spotLight = new THREE.PointLight("#ffffff", 1);
			spotLight.position.set(0, 10, 0);
			//告诉平行光需要开启阴影投射
			spotLight.castShadow = true;
			scene.add(spotLight);
		}

		var moon, earth, earthPath, plane, group1, group;

		function initModel() {
			//辅助工具
			var helper = new THREE.AxesHelper(10);
			scene.add(helper);

			var VRCUBE = new THREE.Mesh(new THREE.SphereGeometry(150, 30, 30),
				new THREE.MeshBasicMaterial({
					// map: new THREE.TextureLoader().load("./img/vr.jpg"),
					map: new THREE.TextureLoader().load("http://wap_front.dev.sina.cn/aoshuang/demo/vrFeed_weibo_web/images/full4.jpg"),

					
					side: THREE.DoubleSide,
					// side: THREE.BackSide,
				}));
			VRCUBE.scale.x = -1;

			VRCUBE.position.set(0, 0, 0);
			scene.add(VRCUBE);

		}

		//初始化性能插件

		var stats;

		function initStats() {
			stats = new Stats();
			document.body.appendChild(stats.dom);

		}

		//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
		var controls;

		function initControls() {
			controls = new THREE.OrbitControls(camera, renderer.domElement);

			// 使动画循环使用时阻尼或自转 意思是否有惯性
			controls.enableDamping = true;

			//动态阻尼系数 就是鼠标拖拽旋转灵敏度
			controls.dampingFactor = 0.95;

			//是否可以缩放
			controls.enableZoom = true;

			//是否自动旋转

			controls.autoRotate = false;

			controls.rotateSpeed = -1;


			//设置相机距离原点的最近距离
			controls.minDistance = 0;

			//设置相机距离原点的最远距离
			controls.maxDistance = 1450;

			//是否开启右键拖拽
			controls.enablePan = false;

		}

		function render() {
			renderer.render(scene, camera);
		}

		//窗口变动触发的函数

		function onWindowResize() {

			camera.aspect = window.innerWidth / window.innerHeight;
			// 更改参数的时候 必须使用
			camera.updateProjectionMatrix();

			render();

			renderer.setSize(window.innerWidth, window.innerHeight);

		}

		function animate() {

			render();

			//更新性能插件
			stats.update();
			controls.update();
			requestAnimationFrame(animate);

		}

		function draw() {

			initRender();

			initScene();

			initCamera();

			initLight();

			initModel();

			initControls();

			initStats();

			animate();

			window.onresize = onWindowResize;

		}
	</script>

</html>
